<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="common/header.jsp"%>

	<h1>welcome 主页....|${devUser.devname}</h1>
		<style type="text/css">
			*{margin:0;}
			body{overflow: hidden;background:url("2.gif");}
			.content{width:100px;height:100px;position:absolute;top:200px; left: 47%;
			transform-style:preserve-3d;animation: play 3s linear infinite;}
			
			.d{width:100px;height:100px;font-size:50px;text-align:center;line-height:100px;background:url("1.gif");position:absolute;}
			
			   /* 播放          加速度          */
			.d1{animation: runA 3s linear infinite ;top:100px;}
			.d11{opacity:0;animation: runA 3s 1s linear infinite;}
			.d111{opacity:0;animation: runA 3s 2s linear infinite;}
			
			.d2{animation: runB 3s linear infinite;top:0;}
			.d22{opacity:0;animation: runB 3s 1s linear infinite ;}
			.d222{opacity:0;animation: runB 3s 2s linear infinite ;}
			
			.d3{animation: runC 3s linear infinite ;top: 50px;left: -50px;}
			.d33{opacity:0;animation: runC 3s 1s linear infinite ;}
			.d333{opacity:0;animation: runC 3s 2s linear infinite ;}
			
			.d4{animation: runD 3s linear infinite ;top:50px;left:50px;}
			.d44{opacity:0;animation: runD 3s 1s linear infinite ;}
			.d444{opacity:0;animation:runD 3s 2s linear infinite ;}
			
		
			/*定义一个关键帧*//*perspective    景 深距离多远     看他*/
			@keyframes runA{
				from{transform:perspective(10px) rotateX(12deg)rotateZ(180deg)translateY(200px);opacity: 1;}
				to{transform:perspective(10px) rotateX(12deg)rotateZ(180deg)translateY(-100px);opacity: 1;}
			}
			
			@keyframes runB{
				from{transform:perspective(10px) rotateX(-12deg)translateY(200px);opacity: 1;}
				to{transform:perspective(10px) rotateX(-12deg)translateY(-100px);opacity: 1;}
			}
			
			@keyframes runC{
				from{transform:perspective(10px) rotateX(0)rotateY(12deg)rotateZ(-90deg)translateY(200px);opacity: 1;}
				to{transform:perspective(10px) rotateX(0)rotateY(12deg)rotateZ(-90deg)translateY(-100px);opacity: 1;}
			}
			
			@keyframes runD{
				from{transform:perspective(10px)rotateX(0deg)rotateY(-12deg)rotateZ(90deg)translateY(200px);opacity: 1;}
				to{transform:perspective(10px)rotateX(0deg)rotateY(-12deg)rotateZ(90deg)translateY(-100px);opacity: 1;}
			}
			
			@keyframes play{
				from{transform: rotate(0deg)scale(1);}
				50%{transform: rotate(180deg)scale(3);}
				to{transform: rotate(360deg)scale(1);}
			}
		</style>
	
		<div class="content">
		
			
			<div class="d d1">A</div>
			<div class="d d1 d11">A</div>
			<div class="d d1 d111">A</div>
			
			<div class="d d2">A</div>
			<div class="d d2 d22">A</div>
			<div class="d d2 d222">A</div>
			
			<div class="d d3">A</div>
			<div class="d d3 d33">A</div>
			<div class="d d3 d333">A</div>
			
			<div class="d d4">A</div>
			<div class="d d4 d44">A</div>
			<div class="d d4 d444">A</div>
		
			
		</div>
	
	
	


<%@include file="common/footer.jsp"%>